<div class="card mb-4">
    <div class="row">
        <div class="col-md-1">
            <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle" style="cursor: grab;"></small>
        </div>
        <div class="mb-3x col-md-4">
            <small class="form-label">Column: <span class="text-black-50" ng-bind="$ctrl.column.name"></span></small>
            <input ng-model="$ctrl.column.title" placeholder="Title" ng-change="$ctrl.generateName(col)"
                class="form-control form-control-sm" />
        </div>
        <div class="mb-3x col-md-2">
            <small class="form-label">Type {{$ctrl.column.dataType}}</small>
            <mix-select model="$ctrl.column.dataType" options="$ctrl.localizeSettings.dataTypes"
                callback="$ctrl.changeDataType(type)">
            </mix-select>
        </div>
        <div class="mb-3x col-md-3">
            <div class="" ng-if="$ctrl.column.dataType != 'Reference'">
                <small class="form-label">Value</small>
                <mix-value-editor string-value="$ctrl.column.defaultValue" type="$ctrl.column.dataType">
                </mix-value-editor>
            </div>
            <div ng-if="$ctrl.column.dataType == 'Reference'">
                <small>
                    Attribute [
                    <a ng-click="$ctrl.showReferences($ctrl.column.column)" class="btn-link text-primary">Select</a>
                    ]
                </small>
                <br />
                <a ng-if="$ctrl.column.referenceId" href="/portal/mix-database/details/{{$ctrl.column.referenceId}}"
                    class="btn btn-link"><small>
                        <span class="fas fa-pen text-primary"></span> Edit table
                        {{$ctrl.column.reference.title}}</small>
                </a>
            </div>
        </div>
        <div class="col-md-2">
            <div class="btn-group btn-group-sm float-end">
                <a href="" class="btn btn-primary text-white"
                    ng-click="$ctrl.column.showAdvanced = !$ctrl.column.showAdvanced">
                    <span class="far fa-check-square"></span>
                </a>
                <a href="" class="btn btn-primary text-white"
                    ng-if="$ctrl.column.mixDatabaseName === 'sys_additional_column'"
                    ng-click="$ctrl.removeAttribute(col, $index)">
                    <span class="fas fa-trash-alt"></span>
                </a>
            </div>
        </div>
    </div>

    <div class="my-2" ng-show="$ctrl.column.showAdvanced">
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md form-check-inline px-2">
                <div class="form-check form-switch mx-2">
                    <input type="checkbox" class="form-check-input" ng-model="$ctrl.column.isEncrypt"
                        id="{{'isEncrypt_' + $index}}" />
                    <label class="custom-control-label" for="{{'isEncrypt_' + $index}}">
                        Encrypt
                    </label>
                </div>
                <div class="form-check form-switch mx-2">
                    <input type="checkbox" class="form-check-input" ng-model="$ctrl.column.isUnique"
                        id="{{'unique_' + $index}}" />
                    <label class="custom-control-label" for="{{'unique_' + $index}}">
                        Unique
                    </label>
                </div>
                <div class="form-check form-switch mx-2">
                    <input type="checkbox" class="form-check-input" ng-model="$ctrl.column.isRequire"
                        id="{{'required_' + $index}}" />
                    <label class="custom-control-label" for="{{'required_' + $index}}">
                        Required
                    </label>
                </div>
                <div class="form-check form-switch mx-2">
                    <input type="checkbox" class="form-check-input" ng-model="$ctrl.column.isSelect"
                        id="{{'select_' + $index}}" />
                    <label class="custom-control-label" for="{{'select_' + $index}}">
                        Select
                    </label>
                </div>
                <div class="form-check form-switch mx-2">
                    <input type="checkbox" class="form-check-input" ng-model="$ctrl.column.isMultiple"
                        id="{{'multiple_' + $index}}" />
                    <label class="custom-control-label" for="{{'multiple_' + $index}}">
                        Select
                    </label>
                </div>
                <div class="form-check form-switch mx-2">
                    <input type="checkbox" class="form-check-input"
                        ng-click="$ctrl.column.isRegex = !$ctrl.column.isRegex" id="{{'regex_' + $index}}" />
                    <label class="custom-control-label" for="{{'regex_' + $index}}">
                        Regex
                    </label>
                </div>
            </div>
        </div>
        <div class="row mb-3" ng-show="$ctrl.column.dataType=='Upload'">
            <div class="form-check form-switch mx-2">
                <input type="checkbox" class="form-check-input"
                    ng-model="$ctrl.column.columnConfigurations.upload.isCrop" id="{{'isCrop_' + $index}}" />
                <label class="custom-control-label" for="{{'isCrop_' + $index}}">
                    Crop
                </label>
            </div>
            <div class="col-md-3">
                <span>Width</span>
                <input type="number" ng-model="$ctrl.column.columnConfigurations.upload.width" class="sm-control" />
            </div>
            <div class="col-md-3">
                <span>Height</span>
                <input type="number" ng-model="$ctrl.column.columnConfigurations.upload.height" class="sm-control" />
            </div>
        </div>
    </div>

    <div class="row mb-3" ng-show="$ctrl.column.isRegex">
        <div class="col-md-1"></div>
        <div class="col">
            <input type="text" class="col form-control form-control-sm" ng-model="$ctrl.column.regex"
                placeholder="Regular Expression..." />
        </div>
    </div>
    <div ng-show="$ctrl.column.isSelect">
        <div class="row mb-2">
            <div class="col-md-1"></div>
            <div class="col">
                <div class="mb-3">
                    <input type="text" class="form-control form-control-sm" id="option_{{$index}}"
                        ng-enter="$ctrl.addOption(col,$index)"
                        placeholder="Please type in the value then enter to add to option list..." />
                </div>

                <div class="row" ng-repeat="opt in $ctrl.column.options track by $index">
                    <div class="mb-3x col-md pl-4">
                        <input type="text" class="form-control form-control-sm"
                            ng-model="$ctrl.column.options[$index].value" />
                    </div>
                    <div class="mb-3x col-md-3">
                        <mix-select model="$ctrl.column.options[$index].dataType"
                            options="$ctrl.localizeSettings.dataTypes">
                        </mix-select>
                    </div>
                    <div class="mb-3x col-md-1">
                        <a class="btn btn-sm" ng-click="$ctrl.column.options.splice($index,1)">
                            <span class="fas fa-trash-alt text-danger"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr />
</div>
</div>
<div class="row" ng-show="$ctrl.column.showAdvanced">
    <div class="col-md-1"></div>
    <div class="col-md-2">
        <span class="form-check form-switch">
            <input type="checkbox" ng-model="$ctrl.column.isEncrypt" />
            <label class="custom-control-label">
                <span>Encrypt</span>
            </label>
        </span>
    </div>
    <div class="col-md-2">
        <span class="form-check form-switch">
            <input type="checkbox" ng-model="$ctrl.column.isUnique" />
            <label class="custom-control-label">
                <span>Unique</span>
            </label>
        </span>
    </div>
    <div class="col-md-2">
        <span class="form-check form-switch">
            <input type="checkbox" ng-model="$ctrl.column.isRequire" />
            <label class="custom-control-label">
                <span>Required</span>
            </label>
        </span>
    </div>
    <div class="col-md-2">
        <span class="form-check form-switch">
            <input type="checkbox" ng-model="$ctrl.column.isSelect" />
            <label class="custom-control-label">
                <span>Select</span>
            </label>
        </span>
    </div>
</div>
<div ng-show="$ctrl.column.isSelect">
    <div class="row">
        <label class="col-sm-3 col-form-label">Title</label>
        <div class="col-sm-7">
            <input type="text" class="form-control form-control-sm" id="option_{{$index}}"
                ng-enter="$ctrl.addOption(col,$index)" placeholder="fill then enter to add options" />
        </div>
    </div>
    <div class="row" ng-repeat="opt in $ctrl.column.options track by $index">
        <div class="col-md-10 row">
            <input type="text" class="col-7 form-control form-control-sm"
                ng-model="$ctrl.column.options[$index].value" />
            <mix-select model="$ctrl.column.options[$index].dataType" options="$ctrl.localizeSettings.dataTypes">
            </mix-select>
            <hr />
        </div>
    </div>
</div>

<div class="row">
    <!-- <div class="col-md-1">
              <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle" style="cursor: grab"></small>
          </div> -->
    <div class="mb-3x col-md-7">
        <small class="form-label">Column: <span class="text-black-50" ng-bind="$ctrl.column.name"></span></small>
        <input ng-model="$ctrl.column.title" placeholder="Title" ng-change="$ctrl.generateName($ctrl.column)"
            ng-enter="$ctrl.addAttr()" class="form-control form-control-sm" />
    </div>
    <div class="mb-3x col-md-3">
        <small class="form-label">Type</small>
        <mix-select model="$ctrl.column.dataType" options="$ctrl.localizeSettings.dataTypes"
            callback="$ctrl.changeDataType(type)">
        </mix-select>
    </div>
    <div class="col-md-2">
        <a ng-click="$ctrl.addAttr()" class="btn btn-link btn-sm float-end text-primary"><span
                class="fas fa-plus"></span>
            Add column</a>
    </div>
</div>